<template>
  <div>
    <a-row style="background:#fff" :gutter="[0, 0]">

      <div class="conditionsSearch">条件搜索</div>
        <div class="search-wrapper">
          <!-- 头部搜索 -->
          
          <a-form-model class="topAntform" ref="searchFormRef" :model="searchFormData">
            <a-form-model-item label="角色名称:" class="serach-input">
              <a-input placeholder="请输入" size="large" v-model="searchFormData.name"/>
            </a-form-model-item>
          </a-form-model>
          <!-- 按钮组 -->
          <div class="btn-group">
            <a-button type="success" icon="search" @click="searchBtnClick" style="background-color:#0079FE;color:#fff">
              查询
            </a-button>
            <!-- <a-button @click="resetBtnClick">重置</a-button> -->
          </div>
        </div>

      <a-col >
        <a-card :body-style="{padding: '10px'}" :bordered="false">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              width:100%;
              height:30px;
              float:right;
              margin-bottom:10px;
              justify-content: space-between;
            "
          >
          <span style="padding-left:12px;color: rgba(0, 0, 0, 0.85);font-size: 14px;">当前有<span style="padding:0 3px">{{pagination.total}}</span>条数据</span>
            <div
              style="text-align: right; cursor: pointer"
              class="handle"
            >
              <!-- <a
                href="javascript:;"
                style="margin: 0 10px 0 0"
                @click="addResourceHandle"
                >新增</a
              > -->
              <a class="addStyle" style="margin-right: 8px;color:#fff;" @click="addResourceHandle" v-permission:role="['add']">
                  <a-icon type="plus"/>新增
                </a>
            </div>
          </div>
          <div style="margin-top: 40px">
            <a-table :columns="columns" :data-source="tableData" @change="paganationChange" :pagination="pagination" size="small">
              <template slot="operation" slot-scope="text, record, index">
                <div class="editable-row-operations">
                  <a v-if="record.initFlag !== 0" href="javascript:;" style="margin: 0 10px"  @click="updateResourceHandle(text, record, index)"
                  v-permission:role="['update']">
                     编辑</a>
                  <a v-if="record.initFlag !== 0"  href="javascript:;" style="margin: 0 10px 0 0" @click="deleteResourceHandle(text, record, index)"
                  v-permission:role="['delete']">删除</a>
                  <a v-if="record.initFlag !== 0"  href="javascript:;" style="margin: 0 10px 0 0" @click="sortResourceHandle(text, record, index)"
                  v-permission:role="['sort']">排序</a>

                   <a v-if="record.shield==0 && record.initFlag !== 0" href="javascript:;" @click="enableResourceHandle(text, record, index)"
                   v-permission:role="['enable']">禁用</a>
                   <a v-if="record.shield !== 0 && record.initFlag !== 0" href="javascript:;" @click="enableResourceHandle(text, record, index)"
                   v-permission:role="['enable']">启用</a>


                </div>
              </template>
            </a-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-modal :title="content" width="40%" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="visible=false">
      <a-form-model ref="ruleForm" :model="menuObj" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">

        <a-form-model-item ref="name" label="角色名称" prop="name">
          <a-input v-model="menuObj.name" placeholder="请输入" @blur=" () => {$refs.name.onFieldBlur();}"/>
        </a-form-model-item>
        <a-form-model-item ref="code" label="角色编码" prop="code">
          <a-input v-model="menuObj.code" placeholder="请输入" @blur=" () => {$refs.code.onFieldBlur();}"/>
        </a-form-model-item>

        <a-form-model-item label="备注" prop="remark">
          <a-input v-model="menuObj.remark" placeholder="请输入" type="textarea" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>





     <a-modal title="排序" width="40%" :visible="sortVisible" :confirm-loading="confirmLoading" @ok="sortHandleOk" @cancel="sortVisible=false">
      <a-form-model ref="ruleForm" :model="sortObj" :rules="rules1" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">

        <a-form-model-item ref="sortVaule" label="排序值" prop="sortVaule">
          <a-input v-model="rules1.sortVaule" placeholder="请输入" @blur=" () => {$refs.sortVaule.onFieldBlur();}"/>
        </a-form-model-item>



      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {
  roleSort,
  getRoleList,
 roleEnable,
  roleDelete,
  roleSave,
  roleUpdate
} from "../../services/system";
export default {
  name: "MenuManage",
  data() {
    return {
         searchFormData:{
        name:''
      },
      content:'',
      tilte:'',
      appList: [],
      channelList: [],
      query: {
        appInfoCode: null,
        channelType: null
      },
      searchValue: '',
      treeData: [],
      replaceFields: {
        title: 'name',
        key: 'id'
      },
      roleType:'',
      visible: false,
      sortVisible:false,
      confirmLoading: false,
      parentObj: {},
      menuObj: {
        name: null,
        code:null,
        remark: null,
        tenantCode:sessionStorage.getItem('tenantCode')
      },
      sortObj:{
        id:null,
        tenantCode:null
      },
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],

      },
      rules1:{
        sortVaule: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
      },
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      columns: [

        {
          title: '角色名称',
          dataIndex: 'name',
        },
        {
          title: '角色编号',
          dataIndex: 'code',
        },
        {
          title: '成员人数',
          dataIndex: 'userNumber',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
        } ,{
          title: '创建人',
          dataIndex: 'loginName',
        },{
          title: '排序',
          dataIndex: 'sort',
        },
        {
          title: '备注',
          dataIndex: 'remark',
        },
        {
          title: '操作',
          dataIndex: 'Action',
          scopedSlots: { customRender: 'operation' },
        }
      ],
      tableData: []
    };
  },
  created() {

    this.getRoleList()
  },
  methods: {

// spkart   新增排序
paganationChange(pagination) {
  console.log(pagination);
  this.pagination = pagination
  if(sessionStorage.getItem('roleType') !== 'PLATFORM_ADMIN'){   // spkart  修改roleType判断
  this.roleType='NORMAL'
  } else {
  this.roleType='TENTANT_ADMIN'
  }
  const parma={
    roleType:this.roleType,
   tenantCode:sessionStorage.getItem('tenantCode'),
    page: pagination.current,
    perPage: pagination.pageSize
  }
  getRoleList(parma).then(res=>{
        this.tableData = res.data.data.rows
        this.pagination.total = res.data.data.count
      })
},

getRoleList(){
  if(sessionStorage.getItem('roleType') !== 'PLATFORM_ADMIN'){   // spkart  修改roleType判断
  this.roleType='NORMAL'
  } else {
  this.roleType='TENTANT_ADMIN'
  }
  const parma={
    roleType:this.roleType,
   tenantCode:sessionStorage.getItem('tenantCode')
  }
  getRoleList(parma).then(res=>{
        this.tableData = res.data.data.rows
        this.pagination.total = res.data.data.count
      })

},
sortHandleOk(){
    this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          let handle = roleSort(this.sortObj.id,this.rules1.sortVaule)

          handle.then(res=>{
            this.confirmLoading = false
            if(res.data.status==0){
              this.sortVisible = false
                this.getRoleList()
            }
          }).catch(error=>{
            console.log(error)
            this.confirmLoading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

},
handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          let handle
          if(this.menuObj.id){
            handle = roleUpdate(this.menuObj.id,this.menuObj)
          }else{
            handle = roleSave(this.menuObj)
          }
          handle.then(res=>{
            this.confirmLoading = false
            if(res.data.status==0){
              this.visible = false
                this.getRoleList()
            }
          }).catch(error=>{
            console.log(error)
            this.confirmLoading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    addResourceHandle () {
      this.menuObj={
         name:null,
        code:null,
        remark: null,
         tenantCode:sessionStorage.getItem('tenantCode')
      }
        this.visible = true
        this.content='新增'
    },
    updateResourceHandle (text, item) {
      console.log(item)
      this.menuObj=item
      this.menuObj.tenantCode=sessionStorage.getItem('tenantCode')
      this.visible = true
      this.content='编辑'
    },

    enableResourceHandle(text,item){
        let vm = this

        if(item.shield==0){//要去禁用
        vm.title='您确定要禁用该数据？'
        item.shield=1

        }else{//要去启用
        vm.title='您确定要启用该数据？'
         item.shield=0
        }
      this.$confirm({
        title: vm.title,
        onOk() {
          return new Promise((resolve, reject) => {
            roleEnable(item.id,item.shield).then(res=>{
              if(res.data.status==0){
                vm.getRoleList()
                resolve()
              }else{
                reject(res.data.msg)
              }
            })
          })
        },
        onCancel() {},
      });
    },
    sortResourceHandle(text,item){
      console.log(item)
       this.sortVisible = true
      this.sortObj.id=item.id
      this.rules1.sortVaule= item.sort
      this.sortObj.tenantCode=sessionStorage.getItem('tenantCode')

    },


    deleteResourceHandle (text, item) {
      let vm = this
      this.$confirm({
        title: '您确定要删除该数据？',
        content: '数据删除后不可恢复',
        onOk() {
          return new Promise((resolve, reject) => {
            roleDelete(item.id).then(res=>{
              if(res.data.status==0){
                vm.getRoleList()
                resolve()
              }else{
                reject(res.data.msg)
              }
            })
          })
        },
        onCancel() {},
      });
    },
       //搜索
    searchBtnClick(){

       const parma={
       roleType:this.roleType,
     name:this.searchFormData.name,
      tenantCode:sessionStorage.getItem('tenantCode')
  }
  getRoleList(parma).then(res=>{
        this.tableData = res.data.data.rows
        this.pagination.total = res.data.data.count
      })


    },
  },
}
</script>

<style lang="less" scoped>

  .conditionsSearch{
    border: 1px solid #eee;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 4px 4px 0 0;
    margin: 15px 10px 0;
  }
  .search-wrapper{
    border-radius: 0 0 4px 4px;
    display: flex;
    background-color: #fff;
    align-items: center;
    border: 1px solid #eee;
    border-top: none;
    padding-left: 12px;
    padding-bottom: 8px ;
    margin: 0 10px;
  }
  .topAntform{
    width: 313px;
    height: 48px;
  }
  .serach-input {
    display: flex;
    padding-top:5px ;
    input {
      margin-left: 10px;
      height: 30px;
    }
  }
  .btn-group {
    padding: 0;
    button {
      background-color: #fff!important;
      color: #666!important;
    }
  }
/deep/ .ant-card{
  padding-top:0 ;
}
.addStyle{
  display: flex;
  align-items: center;
  justify-content: center;
  background:rgb(0, 121, 254);
  width:78px;
  height:30px;
}
.menu {
  .handle {
    i {
      margin: 0 10px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
</style>
